<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>喜庆九宫格抽奖</title>
  <style>
    body {
      font-family: "Microsoft Yahei", sans-serif;
      background: linear-gradient(180deg, #b30000, #660000);
      color: #fff;
      text-align: center;
      margin: 0;
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    h1 {
      color: #ffd700;
      text-shadow: 2px 2px 5px #000;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 120px);
      grid-template-rows: repeat(3, 120px);
      gap: 12px;
      justify-content: center;
      margin: 20px 0;
      border: 3px solid #ffd700;
      border-radius: 10px;
      padding: 10px;
      background: #cc0000;
    }
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid #ffd700;
      border-radius: 10px;
      font-size: 16px;
      font-weight: bold;
      background: #cc0000; /* 默认颜色 */
      color: #fff;
      transition: 0.3s;
      text-align: center;
      line-height: 1.2;
    }
    .cell.active {
      background: #ffd700;
      color: #b30000;
      box-shadow: 0 0 15px #ffd700;
    }
    .center {
      font-size: 18px;
      cursor: default;
      background: #cc0000; /* 与普通格子相同 */
    }
    button {
      background: #ffd700;
      color: #b30000;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      margin: 10px;
      font-weight: bold;
      box-shadow: 0 0 8px #000;
    }
    button:hover {
      background: #fff;
      color: #b30000;
    }
    #result {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #ffd700;
    }
    #history {
      margin-top: 10px;
      font-size: 14px;
      color: #fff;
      text-align: left;
      max-width: 360px;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
  <h1>🧨 九宫格抽奖 🧧</h1>
  <div class="grid" id="grid"></div>
  <button id="startBtn">开始抽奖</button>
  <div id="result">结果：未开始</div>
  <div id="history">历史记录：</div>

  <script>
    const prizes = ["红包", "福袋", "锦鲤奖", "金元宝", "春联套装", "小灯笼", "糖果礼包", "鞭炮"];
    const centerPrize = "金奖礼包"; // 中间格子

    const grid = document.getElementById("grid");
    const result = document.getElementById("result");
    const history = document.getElementById("history");
    let cells = [];
    let timer = null;
    let running = false;

    // 周围格子索引（不包含中间格子 4）
    const scrollIndexes = [0,1,2,3,5,6,7,8];

    function createGrid() {
      for (let i = 0; i < 9; i++) {
        const cell = document.createElement("div");
        cell.className = "cell";
        if (i === 4) {
          cell.textContent = centerPrize;
          cell.classList.add("center");
        } else {
          cell.textContent = prizes[i < 4 ? i : i - 1];
        }
        grid.appendChild(cell);
        cells.push(cell);
      }
    }

    function startLottery() {
      if (running) return;
      running = true;
      let rounds = Math.floor(Math.random() * 20) + 30;
      let idx = 0;
      let count = 0;
      timer = setInterval(() => {
        cells[scrollIndexes[idx]].classList.remove("active");
        idx = (idx + 1) % scrollIndexes.length;
        cells[scrollIndexes[idx]].classList.add("active");
        count++;
        if (count >= rounds) {
          clearInterval(timer);
          running = false;
          const prize = cells[scrollIndexes[idx]].textContent;
          result.textContent = "🎉 恭喜你抽中了：" + prize;
          history.innerHTML += `<div>获得：${prize}</div>`;
        }
      }, 120);
    }

    document.getElementById("startBtn").addEventListener("click", startLottery);
    createGrid();
  </script>
</body>
</html>
